<template>
	<view>
		<u-popup v-model="showPop" mode="center" :custom-style="customStyle" :mask-custom-style="maskCustomStyle">

			<view class="flex-col flex-1 popup ml-7-5">
				<text class="self-center title">{{agreeTitle}}</text>
				<view class="flex-col self-stretch mt-16-5">
					<!-- <text class="content">
				     {{agreement}}
				    </text> -->
					<scroll-view scroll-y="true" style="height: 250px;">
						<view>
							<rich-text :nodes="agreement"></rich-text>
						</view>
					</scroll-view>

					<view @click="changAgree" class="flex-row items-center bottom justify-center">
						<image v-if="!checked" class="image_check"
							src="https://terminator.axu9.com/images/membership-unchecked.png" />
						<image v-else class="image_check"
							:src="commonData.createData.checked" />
						<text class="ml-6 text_agree">已知并同意</text>
						<text class="agreement-text2">《{{agreeTitle}}》</text>
						<text class="ml-6 text_agree">和</text>
						<text @click.stop="toAgreement" class="agreement-text2">《{{privacyTitle}}》</text>
					</view>
					<view class="flex-row bottom-btn">
						<view @click="noAgree" class="flex-col justify-start items-center agree-btn"><text
								class="font-noagree">取消</text></view>
						<view @click="Agree" class="ml-14 flex-col justify-start items-center noagree-btn">
							<text class="font-agree">同意并继续</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import commonData from '@/common/js/data.js';
	import {
		getAgreement
	} from "@/api/video.js"
	export default {
		data() {
			return {
				showPop: false,
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 1)'
				},
				agreeTitle: '',
				agreement: '',
				privacyTitle: '',//隐私协议标题 
				checked: false,
				commonData: {}
			}
		},
		created() {
			this.getXieyi(1);//隐私协议
			this.getXieyi(6);//激活码协议
			this.commonData = commonData;
		},
		methods: {
			open() {
				this.showPop = true;
			},
			close() {
				this.showPop = false;
			},
			noAgree() {
				this.showPop = false;
				// this.checked = false;
				// uni.setStorageSync("activeCodeAgreeCheck",false)
			},
			Agree() {
				this.checked = true;
				uni.setStorageSync("activeCodeAgreeCheck", true)
				this.$emit('submit')
			},
			// 跳转到协议
			toAgreement() {
				uni.navigateTo({
					url: '/pagesMine/agreement/index?type=1'
				})
			},
			// 激活码激活协议
			getXieyi(type) {
				getAgreement({
					id: type
				}).then(res => {
					if (res.errno == 0) {
						if(type == 6){
							this.agreeTitle = res.data.title;
							this.agreement = res.data.content;
						}else if(type == 1){
							this.privacyTitle = res.data.title;
						}
						
					}
				})
			},
			changAgree() {
				this.checked = !this.checked;
				uni.setStorageSync("activeCodeAgreeCheck", this.checked)
			},
		}
	}
</script>

<style>
	@import url(../../static/css/common.css);
</style>
<style lang="less" scoped>
	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
<style lang="scss" scoped>
	.mt-23 {
		margin-top: 46rpx;
	}

	.ml-9-5 {
		margin-left: 19rpx;
	}

	.mt-17 {
		margin-top: 34rpx;
	}

	.mt-98-5 {
		margin-top: 197rpx;
	}

	.mt-22-5 {
		margin-top: 45rpx;
	}

	.ml-3-5 {
		margin-left: 7rpx;
	}

	.mt-14-5 {
		margin-top: 29rpx;
	}

	.mt-15 {
		margin-top: 30rpx;
	}



	.image {
		width: 655rpx;
		height: 24rpx;
	}

	.group {
		padding: 0 20rpx;
	}

	.image_2 {
		width: 20rpx;
		height: 35rpx;
	}

	.pos {
		position: absolute;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 34rpx;
	}

	.group_2 {
		padding: 0 30rpx;
	}

	.section {
		padding: 41rpx 30rpx 38rpx;
		background-color: #212123;
		border-radius: 16rpx;
	}

	.image_3 {
		width: 33rpx;
		height: 33rpx;
	}

	.font {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.text_2 {
		margin-left: 12rpx;
		color: #72777f;
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
	}

	.group_3 {
		padding: 0 16rpx;
	}

	.text-wrapper {
		flex: 1 1 286rpx;
		padding: 30rpx 0;
		border-radius: 16rpx;
		height: 90rpx;
		border-left: solid 2rpx #00e586;
		border-right: solid 2rpx #00e586;
		border-top: solid 2rpx #00e586;
		border-bottom: solid 2rpx #00e586;
	}

	.font_2 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 29rpx;
		font-weight: 500;
		color: #00e586;
	}

	.text-wrapper_2 {
		flex: 1 1 286rpx;
		padding: 30rpx 0;
		background-image: linear-gradient(90deg, $button-color-bg-lin-left 0%, $button-color-bg-lin-right 100%);
		border-radius: 16rpx;
		height: 88rpx;
	}

	.text_3 {
		line-height: 28rpx;
	}

	.section_2 {
		padding: 46rpx 30rpx;
		background-color: #212123;
		border-radius: 16rpx;
	}

	.font_3 {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.section_3 {
		padding: 28rpx 18rpx 17rpx;
		background-color: #39444069;
		border-radius: 20rpx;
	}

	.image_4 {
		width: 81rpx;
		height: 74rpx;
	}

	.text_4 {
		line-height: 31rpx;
	}

	.text-wrapper_3 {
		padding: 28rpx 0;
		border-radius: 16rpx;
		border-left: solid 2rpx #00e586;
		border-right: solid 2rpx #00e586;
		border-top: solid 2rpx #00e586;
		border-bottom: solid 2rpx #00e586;
	}

	.section_4 {
		padding: 46rpx 27rpx 0 30rpx;
		background-color: #212123;
		border-radius: 16rpx;
	}

	.image-wrapper {
		margin-top: 32rpx;
		padding: 30rpx 20rpx 16rpx;
		border-radius: 20rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #c8c8c8;
		background-color: #212123;
		border: 2rpx solid #8f9192;
		height: 214rpx;
		overflow-y: scroll;
	}

	.image_5 {
		width: 557rpx;
		height: 168rpx;
	}

	.group_4 {
		padding: 28rpx 17rpx;
	}

	.text_5 {
		color: #fefefe;
		line-height: 28rpx;
	}

	/* .popup {
		
	} */
	.ml-7-5 {
		margin-left: 15rpx;
	}

	.mt-16-5 {
		margin-top: 33rpx;
	}

	.image_check {
		width: 30rpx;
		height: 30rpx;
	}

	.popup {
		// margin-right: 40rpx;
		padding: 59rpx 28rpx 30rpx;
		border-radius: 32rpx;
		// background-image: url('https://terminator.axu9.com/images/video-pop-bg.png');
		background-image: linear-gradient(0deg, $white-color 0%, $popup-top-bg-white 100%);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 615rpx;
		// height: 616rpx;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
		// color: #ffffff;
		color: #000;
	}

	.content {
		margin-left: 6rpx;
		color: #ffffff;
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 54rpx;
		text-align: center;
		height: 270rpx;
		overflow-y: scroll;
	}

	.bottom {
		margin-top: 26rpx;
	}

	.text_agree {
		// color: #ffffff;
		color: #000;
		font-size: 22rpx;
		font-family: PingFang SC;
		line-height: 22rpx;
	}

	.bottom-btn {
		margin-top: 35rpx;
	}

	.agree-btn {
		padding: 34rpx 0;
		flex: 1 1 257rpx;
		border-radius: 16rpx;
		height: 102rpx;
		border-left: solid 2rpx #00e586;
		border-right: solid 2rpx #00e586;
		border-top: solid 2rpx #00e586;
		border-bottom: solid 2rpx #00e586;
	}

	.font-noagree {
		color: #00e586;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}

	.font-agree {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}

	.noagree-btn {
		margin-right: 5rpx;
		padding: 34rpx 0;
		flex: 1 1 257rpx;
		background-image: linear-gradient(90deg, $button-color-bg-lin-left 0%, $button-color-bg-lin-right 100%);
		border-radius: 16rpx;
		height: 100rpx;
	}

	/* .text_6 {
	  color: #ffffff;
	  font-size: 32rpx;
	  font-family: PingFang SC;
	  line-height: 31rpx;
	} */
	.agreement-text2 {
		color: #00db9c;
		font-weight: 500;
		font-face: PingFang SC;
		font-size: 24rpx;
	}
</style>